<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div style="width: 500px;height: 500px;position:relative">
    <canvas id="cvs" width="400" height="400" style="position:absolute;z-index:1;"></canvas>
    <canvas id="cvsS" width="400" height="400" style="position:absolute;z-index:10"></canvas>
    <canvas id="cvsN" width="400" height="400" style="position: absolute; left : 450px; top :0;"></canvas>
    <canvas id="cvsM" width="400" height="400" style="position: absolute; left : 950px; top :0;"></canvas>
</div>
<input type="file" id="fileUpload"/>
<script>
    var file = document.getElementById("fileUpload");
    var img = new Image();
    file.addEventListener("change", function () {
        // 读取用户选中的文件
        // 创建一个img标签
        var imgFile = file.files[0];
        // 通过URL.createObjectURL获得一个URL，再把URL赋值给img标签的src属性
//        console.log(imgFile);
        var objectUrl = URL.createObjectURL(imgFile);
        img.src = objectUrl;

        img.addEventListener("load", function () {
            var cvs = document.getElementById("cvs");
            var ctx = cvs.getContext("2d");

            var cvsM = document.getElementById("cvsM");
            var ctxM = cvsM.getContext("2d");

            var demoImg = new Image();
            

            // 获取图片的宽高
            var imgW = img.width;
            var imgH = img.height;
            var scaleW = 400 / imgW;
            var scaleH = 400 / imgH;
            var scale = scaleW > scaleH ? scaleH : scaleW;
            var offsetX, offsetY;
            if (scaleW > scaleH) {
                offsetY = 0;
                offsetX = (400 - imgW * scale) / 2;
            } else {
                offsetX = 0;
                offsetY = (400 - imgH * scale) / 2;
            }
            ctx.drawImage(img, offsetX, offsetY, imgW * scale, imgH * scale);

            var cvsS = document.getElementById("cvsS");
            var ctxS = cvsS.getContext("2d");
            var selector = {
                state: "闲置",
                render: function () {
                    ctxS.fillStyle = "rgba(0,0,0,.5)";
                    ctxS.fillRect(this.x, this.y, this.l, this.l);
                }
            };
            cvsS.addEventListener("mousedown", function (evt) {
                var x = evt.offsetX;
                var y = evt.offsetY;
                if (selector.state == "闲置") {
                    selector.x = x;
                    selector.y = y;
                    selector.state = "选择中";
                } else if (selector.state == "选择结束") {
                    ctxS.beginPath();
                    ctxS.rect(selector.x, selector.y, selector.l, selector.l);
                    if (ctxS.isPointInPath(x, y)) {
                        selector.state = "拖动中";
                        selector.moveLastX = x;
                        selector.moveLastY = y;
                    } else {
                        selector.state = "闲置";
                        ctxS.clearRect(0, 0, 400, 400);
                        ctxS.beginPath();
                        selector.x = selector.y = selector.l = 0;
                    }
                }
            });
            cvsS.addEventListener("mousemove", function (evt) {
                var x = evt.offsetX;
                var y = evt.offsetY;
                if (evt.which == 1) {
                    if (selector.state == "选择中") {
                        var w = x - selector.x;
                        var h = y - selector.y;
                        selector.l = w > h ? w : h;
                        ctxS.clearRect(0, 0, 400, 400);
                        selector.render();
                    } else if (selector.state == "拖动中") {
                        var moveX = x - selector.moveLastX;
                        var moveY = y - selector.moveLastY;
                        selector.x += moveX;
                        selector.y += moveY;
                        selector.moveLastX = x;
                        selector.moveLastY = y;

                        ctxS.clearRect(0, 0, 400, 400);
                        selector.render();
                    }
                    // 把选点映射回原来的图片上
                    var sx = (selector.x - offsetX) / scale;
                    var sy = (selector.y - offsetY) / scale;
                    var sl = selector.l / scale;

                    var cvsN = document.getElementById("cvsN");
                    var ctxN = cvsN.getContext("2d");

                    ctxN.drawImage(img,
                            sx, sy, sl, sl,
                            0, 0, 200, 200
                    );

                    ctxM.drawImage(img,
                            sx, sy, sl, sl,
                            0, 0, 100, 100
                    );


                    var dataUrl = cvsN.toDataURL();

                    demoImg.src = dataUrl;

                }
            });
            cvsS.addEventListener("mouseup", function (evt) {
//                var x = evt.offsetX;
//                var y = evt.offsetY;
                if (selector.state == "选择中") {
                    selector.state = "选择结束";
                } else if (selector.state == "拖动中") {
                    selector.state = "选择结束";
                }
            });

            setInterval(function () {
                console.log(selector.state);
            }, 100)
        });
    });
</script>
</body>
</html>
